<%@ page import="java.util.HashMap" %>
<%@ page import="java.util.Objects" %>
<%@ page import="java.util.ArrayList" %><%--
  Created by IntelliJ IDEA.
  User: PurpleFish
  Date: 2024/12/30
  Time: 20:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>我的关注</title>
</head>
<body>
<div class="top-nav">
    <div style="display: flex">
        <div class="logo">淘宝</div>
        <a class="nav-tab" href="${pageContext.request.contextPath}/index">推荐商品</a>
        <a class="nav-tab active">我的关注</a>
        <a class="nav-tab" href="${pageContext.request.contextPath}/OrderServlet" target="_blank">订单管理</a>
        <a class="nav-tab" href="${pageContext.request.contextPath}/CartServlet" target="_blank">购物车</a>
        <a class="nav-tab" href="${pageContext.request.contextPath}/welcome.jsp" target="_blank">我的</a>
        <%
            HashMap<String,String> user =  (HashMap<String, String>) request.getSession().getAttribute("user");
            int userRole = 0;
            if(user==null){

            }else{
                userRole = Integer.parseInt(user.get("roleId"));// 从会话中获取用户ID
            }

        %>
        <a style="display: <%=userRole==1?"inline-block":"none"%>" class="nav-tab" href="${pageContext.request.contextPath}/manageProducts.jsp"target="_blank">商品管理</a>
    </div>
    <div class="search">
        <div>搜索：</div><label>
        <input type="text" value="" name="search"/>
    </label>
        <button>搜索</button>
    </div>
</div>
<div class="body">
    <c:forEach var="product" items="${favorites}">
        <div class="product">
                <h4>${product.name}</h4>
                <img class="img" src="${product.image}" alt="商品图片">
                <div class="price">价格：${product.price}</div>
                <p>${product.description}</p>
        </div>
    </c:forEach>
</div>
</body>
</html>
<style>
    .img{
        max-width: 90%;
        max-height: 100px;
    }
    .search button{
        background-color: orange;
        height: 23px;
        width: 60px;
        border: none;
        border-radius: 5px;
    }
    .search input{
        height: 23px;
        width: 200px;
    }
    .search div{
        width: 60px;
    }
    .search{
        padding-right: 20px;
        width: 300px;
        display: flex;
        align-items: center;
    }
    .price{
        color: grey;
        font-size: 12px;
    }
    .product a p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; /* 限制为3行 */
        overflow: hidden;
        text-overflow: ellipsis;
        height: 75px;
    }
    .product a{
        width: 100%;
    }
    .product{
        width: 18%;
        min-width: 200px;
        margin: 5px 4px;
        padding: 10px;
        background-color: white;
        line-height: 25px;
    }
    *{
        margin: 0;
        padding: 0;
    }
    .body{
        padding: 10px;
        min-width: 600px;
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        background-color: #f1f1f1;
    }
    .active{
        background-color: grey;
    }
    .top-nav{
        display: inline-flex;
        width: 100%;
        min-width: 600px;
        height: 50px;
        border-bottom: 1px solid;
        font-size: 16px;
        align-items: center;
        justify-content: space-between;
    }
    .nav-tab{
        width: 120px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
    .nav-tab:hover{
        background-color: grey;
    }
    .logo{
        display: inline-flex;
        font-size: 24px;
        width: 120px;
        height: 50px;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-color: orange;
        font-weight: bolder;
    }
    a{
        display: inline-block;
        text-decoration: none;
        color: inherit;
        cursor: default;
        outline: none;
    }
</style>